<template>
  <el-card>
    <el-form ref="addForm" label-width="100px" :model="goodsData" :rules="rules">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form-item label="一级分类" prop="first_cateid">
            <el-select v-model="goodsData.first_cateid" placeholder="请选择" @change="firstCateChange">
              <el-option
                v-for="item in cateList"
                :key="item.id"
                :value="item.id"
                :label="item.catename"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级分类" prop="second_cateid">
            <el-select v-model="goodsData.second_cateid" placeholder="请选择">
              <el-option
                v-for="item in secondCateList"
                :key="item.id"
                :label="item.catename"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称" prop="goodsname">
            <el-input v-model="goodsData.goodsname" placeholder="请输入商品名称"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="price">
            <el-input v-model="goodsData.price" placeholder="请输入商品价格"></el-input>
          </el-form-item>
          <el-form-item label="市场价格" prop="market_price">
            <el-input v-model="goodsData.market_price" placeholder="请输入市场价格"></el-input>
          </el-form-item>

          <el-form-item label="商品图片" prop="img">
            <el-upload
              action="#"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :auto-upload="false"
              :limit="1"
              :on-exceed="limitTips"
              :on-change="fileChange"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-form-item>

          <el-form-item label="商品规格" prop="specsid">
            <el-select v-model="goodsData.specsid" placeholder="请选择" @change="specsChange">
              <el-option
                v-for="item in specsList"
                :key="item.id"
                :label="item.specsname"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="规格属性值" prop="sepcsarr">
            <el-select v-model="goodsData.specsattr" placeholder="请选择" multiple >
              <el-option
                v-for="(item,index) in specsAttrs"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="是否新品" prop="isnew">
            <el-radio-group v-model="goodsData.isnew">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否热卖" prop="ishot">
            <el-radio-group v-model="goodsData.ishot">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="goodsData.status">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="详细描述" name="second">
          <el-form-item prop="description" label-width="0" >
            <vueWangeditor ref="description" id="description" width="100%" style="height:500px"></vueWangeditor>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-form-item>
        <el-button type="primary" @click="submitForm">立即提交</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import vueWangeditor from 'vue-wangeditor'
import {getCateList} from '../../request/category'
import {getSpecsList} from '../../request/specs'
export default {
    components:{
        vueWangeditor
    },
    data(){
        const descValidate=(rule,value,callback)=>{
            const desc=this.$refs.description.getHtml()
            if(desc===`<p><br></p>`){
                return this.$error('请输入商品描述')
            }
            callback()

        }
        return {
            dialogImageUrl:"",
            dialogVisible:false,
            activeName:"first",
            cateList:[],
            secondCateList:[],
            specsList:[],
            specsAttrs:[],
            goodsData:{
                first_cateid:"",
                second_cateid:"",
                goodsname:"",
                market_price:'',
                price:"",
                img:"",
                specsid:'',
                specsattr:'',
                isnew:'',
                ishot:"",
                status:""
            },
            rules:{
                first_cateid:{required:true,message:'请选择'},
                second_cateid:{required:true,message:"请选择"},
                goodsname:{required:true,message:'请输入'},
                market_price:{required:true,message:"请输入"},
                price:{required:true,message:'请输入'},
                description:{validator:descValidate,trigger:'blur'},
                specsid:{required:true,message:'请选择'},
                specsattr:{required:true,message:"请选择"},
                isnew:{required:true,message:'请选择'},
                ishot:{required:true,message:"请选择"},
                status:{required:true,message:'请选择'}
            }
        }
    },
    methods:{
        submitForm(){
            this.$refs.addForm.validate(async valid=>{
                if(valid){
                    const fd=new FormData()
                    for (let key in this.goodsData){
                       
                            fd.append(key,this.goodsData[key])

                        
                    }
                    fd.append('description',this.$refs.description.getHtml())
                    const res=await this.$http.post('/api/goodsadd',fd)
                    if(res.code==200){
                        this.$success(res.msg)
                        return this.$router.push('/goods')
                    }
                    this.$error(res.msg)
                    
                }

            })
        },
        fileChange(file){
            this.goodsData.img=file.raw
        },
        limitTips(){
            this.$error('此处最多上传1张图片')
        },
        handlePictureCardPreview(file){
            this.dialogImageUrl=file.url
            this.dialogVisible=true
        },
        specsChange(id){
            const index=this.specsList.findIndex(item=>item.id==id)
            this.specsAttrs=this.specsList[index].attrs
        },
        firstCateChange(id){
            const index=this.cateList.findIndex(item=>item.id==id)
            this.secondCateList=this.cateList[index].children
        },
        handleClick(tab,event){
            console.log(tab,event)
        },
        async dataInit(){
            const [cateList,specsList]=await this.$http.all([
                getCateList(),
                getSpecsList()

            ])
            this.cateList=cateList
            this.specsList=specsList
        }


    },
    created(){
        this.dataInit()
    }
};
</script>

<style lang='less' scoped>
.el-input{
    width: 400px;
}
</style>